<template>
  <div>
    <FormTable :formData="formData"
               :columnData="columnData"
               :url="$api.coupon_user_getlist"
               :editData="editData"
               :is_default_edit="true"
               label-width="160px"
               :pageConfig="pageConfig">
      <template slot="detail_content"
                slot-scope="scope">
        <div class="detail_content">
          <div class="detail_content_top">
            <div class="detail_content_top_box">
              <span class="detail_content_top_box_txt">{{scope.data.sentTotal}}</span>
              <span>可下发数</span>
            </div>
            <div class="detail_content_top_box">
              <span class="detail_content_top_box_txt">{{scope.data.displayTotal}}</span>
              <span>成功下发数</span>
            </div>
            <div class="detail_content_top_box">
              <span class="detail_content_top_box_txt">{{scope.data.feedbackTotal}}</span>
              <span>到达数</span>
            </div>
            <div class="detail_content_top_box">
              <span class="detail_content_top_box_txt">{{scope.data.clickTotal}}</span>
              <span>点击数</span>
            </div>
          </div>
          <div class="detail_content_bottom">
            <Table :tableData="getTable(scope.data)"
                   :columnData="getColumnData(scope.data)"
                   :is_show_pagination="false"
                   :total="1"></Table>
          </div>
        </div>
      </template>
    </FormTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: [
        {
          name: "coupon_title",
          label: "优惠券标题",
          value: "",
          type: "input",
        },
        {
          name: "coupon_type",
          label: "优惠券类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "card_type",
          label: "卡券类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "status",
          label: "是否使用",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '未使用',
              value: 0
            },
            {
              label: '已使用',
              value: 1
            },
            {
              label: '已过期',
              value: 2
            },
          ]
        },
        {
          name: "source",
          label: "来源",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '领券中心',
              value: 0
            },
            {
              label: '抽奖',
              value: 1
            },
            {
              label: '积分商城',
              value: 2
            },
          ]
        },
        {
          name: "nickname",
          label: "用户昵称",
          value: "",
          type: "input",
        },

        {
          name: "collection_day",
          label: "领取时间",
          value: '',
          type: "date_time_picker",
          config: {
            format: 'yyyy-MM-dd',
            'value-format': 'yyyy-MM-dd',
            align: 'left'
          },
        },
        {
          name: "use_day",
          label: "使用时间",
          value: '',
          type: "date_time_picker",
          config: {
            format: 'yyyy-MM-dd',
            'value-format': 'yyyy-MM-dd',
            align: 'left'
          },
        },
      ],
      columnData: [
        {
          prop: "unipush_id",
          label: "id"
        },
        {
          prop: "title",
          label: "推送任务标题",
        },
        {
          prop: "content",
          label: "推送任务内容"
        },
        {
          prop: "skip_type_name",
          label: "跳转类型名称"
        },
        {
          prop: "skip_url",
          label: "跳转链接",
          width: '140px'
        },
        {
          prop: "type_name",
          label: "推送任务类型名称",
          width: '140px'
        },
        {
          prop: "status_name",
          label: "任务状态名称"
        },
        {
          prop: "display",
          label: "是否显示",
          custom: true,
          type: 'switch',
          url: this.$api.unipush_status
        },
        {
          prop: "create_time",
          label: "创建时间",
          width: '160px'
        },
        {
          prop: 'btn_group',
          label: '操作',
          custom: true,
          type: 'btn_group',
          width: '200px',
          group: [
            {
              name: '详情',
              type: 'detail',
              color: 'primary',
              url: this.$api.coupon_user_getlist
            },
          ]
        }
      ],
      editData: [
        {
          name: "title",
          label: "推送任务标题",
          value: "",
          type: "input",
          rules: [
            { required: true, message: "请输入推送任务标题", trigger: "blur" },
          ]
        },
        {
          name: "content",
          label: "推送任务内容",
          value: "",
          type: "input",
          rules: [
            { required: true, message: "请输入推送任务内容", trigger: "blur" },
          ]
        },
        {
          name: "skip_type",
          label: "推送任务跳转类型",
          value: "",
          type: "select",
          groups: [],
          rules: [
            { required: true, message: "请选择会员类型", trigger: "blur" },
          ]
        },
        {
          name: "skip_url",
          label: "推送任务跳转链接",
          value: "",
          type: "input",
          rules: [
            { required: true, message: "请输入推送任务跳转链接", trigger: "blur" },
          ]
        },
        {
          name: "type",
          label: "推送任务类型",
          value: 1,
          type: "select",
          groups: [],
          sel_arr: ['target'],
          sel_rule: [
            {
              id: 2,
              show_arr: ['target'],
            },
            {
              id: 3,
              show_arr: ['target'],
            },
          ],
          rules: [
            { required: true, message: "请选择推送任务类型", trigger: "blur" },
          ]
        },
        {
          name: "target",
          label: "推送任务目标",
          value: "",
          type: "select_table",
          display: 'none',
          config: {
            valueKey: 'cid',
            url: this.$api.unipush_getCidUserList,
            rule: 'string',
            formData: [
              {
                name: "title",
                label: "推送任务标题",
                value: "",
                type: "input",
              },
            ],
            columnData: [
              {
                prop: 'cid',
                label: '',
                type: 'selection'
              },
              {
                prop: "mobile",
                label: "手机号码",
              },
              {
                prop: "qd",
                label: "渠道",
              },
              {
                prop: "openid",
                label: "openid",
              },
              {
                prop: "unionid",
                label: "unionid",
              },
              {
                prop: "cid",
                label: "APP唯一标识",
              },
              {
                prop: "score",
                label: "积分",
              },
              {
                prop: "isNew",
                label: "是否新用户",
              },
              {
                prop: "nickName",
                label: "昵称",
              },
              {
                prop: "avatarUrl",
                label: "头像地址",
              },
              {
                prop: "savings",
                label: "节省金额",
              },
              {
                prop: "rights_time",
                label: "权益过期时间",
              },
            ]
          },
          rules: [
            { required: true, message: "请选择推送任务目标", trigger: "blur" },
          ]
        },
      ],
      pageConfig: {
        page: 1,
        pagesize: 10,
      }
    };
  },
  created () {
    this.getType();
  },
  methods: {
    getType () {
      // 获取优惠券类型列表
      let req1 = this.$req.get(this.$api.coupon_coupontype)
      // 获取卡券类型列表
      let req2 = this.$req.get(this.$api.card_cardtype)
      Promise.all([req1, req2]).then(values => {
        this.dataHandler(values[0].data, 1, '', 'coupon_type_name', 'coupon_type_id');
        this.dataHandler(values[1].data, 2, '', 'card_type_name', 'card_type_id');
      })
    },
    dataHandler (data, idx1, idx2, labelKey, valueKey) {
      for (var i in data) {
        if (typeof idx1 == 'number') {
          this.formData[idx1].groups.push({
            label: labelKey ? data[i][labelKey] : data[i],
            value: valueKey ? data[i][valueKey] : data[i]
          })
        }
        if (typeof idx2 == 'number') {
          this.editData[idx2].groups.push({
            label: labelKey ? data[i][labelKey] : data[i],
            value: valueKey ? data[i][valueKey] : data[i],
          })
        }
      }
    },
    handleSizeChange (e) {
      console.log(e);
    },
    handleCurrentChange (e) {
      console.log(e);
    },
    submit (e) {
      console.log(e);
    },
    reset (e) {
      console.log(e);
    },
    getTable (data) {
      if (!data) {
        return
      }
      let col = [{
        qd: '个推渠道',
        clicked: data.GT.clicked,
        displayed: data.GT.displayed,
        feedback: data.GT.feedback,
        sent: data.GT.sent
      }]
      if ('Apn' in data) {
        col.push({
          qd: 'Apn',
          clicked: data.APN.clicked,
          displayed: data.APN.displayed,
          feedback: data.APN.feedback,
          sent: data.APN.sent
        })
      }
      return col
    },
    getColumnData (data) {
      return [
        {
          prop: 'qd',
          label: '下发渠道',
          width: '220px'
        },
        {
          prop: 'clicked',
          label: '点击数',
        },
        {
          prop: "displayed",
          label: "展示数",
        },
        {
          prop: "feedback",
          label: "到达数",
        },
        {
          prop: "sent",
          label: "成功下发数",
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.detail_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  .detail_content_top {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    .detail_content_top_box {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 1px solid #ccc;
      .detail_content_top_box_txt {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      &:last-of-type {
        border-right: none;
      }
    }
  }
}
</style>